<template>
	<view class="home-container">

		<view class="top-content">
			<image class="logo" src="/static/logo.png"></image>
			<view class="text-area">
				<text class="title">乐医</text>
			</view>
		</view>

		<view class="grid-body">
			<uni-grid :column="2" :showBorder="false" :square="false">
				<uni-grid-item>
					<!-- <uni-card :is-shadow="false" margin="5rpx 5rpx 5rpx 0" > -->
					<view class="grid-item-box" :style="{ backgroundColor: '#cdffdd',margin:'5rpx 5rpx 5rpx 0rpx' }">
						<uni-icons type="calendar-filled" size="40" color="#00b700"></uni-icons>
						<text class="text"><text class="text2">5</text>简历被查看</text>
					</view>
					<!-- </uni-card> -->
				</uni-grid-item>
				<uni-grid-item>
					<!-- <uni-card :is-shadow="false" margin="5rpx 0rpx 5rpx 5rpx"> -->
					<view class="grid-item-box" :style="{ backgroundColor: '#cdfffe',margin:'5rpx 0rpx 5rpx 5rpx' }">
						<uni-icons type="upload-filled" size="40" color="#00aaff"></uni-icons>
						<text class="text"><text class="text2">6</text>投递申请</text>
					</view>
					<!-- </uni-card> -->
				</uni-grid-item>
				<uni-grid-item>
					<!-- <uni-card :is-shadow="false" margin="5rpx 5rpx 5rpx 0rpx"> -->
					<view class="grid-item-box" :style="{ backgroundColor: '#cdfffe',margin:'5rpx 5rpx 5rpx 0rpx' }">
						<uni-icons type="camera-filled" size="40" color="#00aaff"></uni-icons>
						<text class="text"><text class="text2">7</text>面试邀请</text>
					</view>
					<!-- </uni-card> -->
				</uni-grid-item>
				<uni-grid-item>
					<!-- <uni-card :is-shadow="false" margin="5rpx 0rpx 5rpx 5rpx"> -->
					<view class="grid-item-box" :style="{ backgroundColor: '#cdffdd',margin:'5rpx 0rpx 5rpx 5rpx' }">
						<uni-icons type="email-filled" size="40" color="#00aa00"></uni-icons>
						<text class="text"><text class="text2">8</text>录用通知</text>
					</view>
					<!-- </uni-card> -->
				</uni-grid-item>
			</uni-grid>
		</view>

		<uni-section title="为您推荐的职位" type="line">
			<template v-slot:right>
				<view @click="goto(1)">
					查看更多<uni-icons type="paperplane-filled" size="16"></uni-icons>
				</view>
			</template>
			<indexPositon></indexPositon>
		</uni-section>

		<view class="divider"></view>

		<uni-section title="近期面试安排" type="line">
			<template v-slot:right>
				<view @click="goto(2)">
					查看更多<uni-icons type="paperplane-filled" size="16"></uni-icons>
				</view>
			</template>
			<indexInterview></indexInterview>
		</uni-section>

		<view class="divider"></view>
	</view>
</template>

<script>
	import indexPositon from '@/components/indexPositon.vue'
	import indexInterview from '@/components/indexInterview.vue'

	export default {
		components: {
			indexPositon,
			indexInterview
		},
		onLoad: function() {},
		methods: {
			goto(type) {
				switch (type) {
					case 1:
						this.$tab.switchTab('/pages/position/index')
						break;
					case 2:
						this.$tab.navigateTo('/pages/mine/interview/interview')
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	.home-container {
		margin: 100rpx 20rpx;

		.top-content {

			// margin-top: 100rpx;
			// margin-left: 20rpx;
			display: flex;
			// flex-direction: column;
			align-items: center;
			// justify-content: center;

			text-align: center;

			.logo {
				height: 80rpx;
				width: 80rpx;
				// margin-top: 100rpx;
				// margin-left: auto;
				margin-right: 10rpx;
				// margin-bottom: 50rpx;
			}

			.text-area {
				// display: flex;
				// justify-content: center;
			}

			.title {
				font-size: 36rpx;
				color: #55aaff;
				font-weight: 600;
			}
		}

		.grid-body {
			margin: 20rpx 0;
		}

		.grid-item-box {
			flex: 1;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 15px 0;

			border-radius: 5px;
			box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
			/* 右下方模糊阴影 */

			.text2 {
				color: #55aaff;
				padding-right: 5rpx;
			}
		}

		.divider {
			padding: 10px;
		}

		::v-deep .uni-list-item {
			background: #f6ffff;
			box-shadow: 0px 3px 10px 0 rgba(0, 0, 0, 0.2);
			margin: 10rpx 0;
		}

		.position {
			width: 100%;

			.position-title {
				display: flex;
				justify-content: space-between;
			}

			.position-name {
				font-size: 36rpx;
				// color: #888888;
				font-weight: 600;
			}

			.position-salary {
				font-size: 36rpx;
				color: #ff5500;
				font-weight: 600;
			}


			.hospital-name {
				margin: 20rpx 0;
				font-size: 26rpx;
				color: #888888;
			}

			.position-right {
				text-align: right;
			}


			.position-benefit {

				display: flex;
				margin-bottom: 30rpx;

				.benefit-item {
					margin-right: 10rpx;
				}
			}
		}
	}
</style>